<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
				xmlns:f="http://java.sun.com/jsf/core"
			    xmlns:h="http://java.sun.com/jsf/html" 
			    xmlns:ui="http://java.sun.com/jsf/facelets">
        
    <script type="text/javascript">
  	//<![CDATA[
  	           
    	function anyadirCiudadDeseada(){
    		
    		var texto = $('#form\\:ciudada2 option:selected').text();
    		var valor = $('#form\\:ciudada2 option:selected').val();
    		var repetido = false;
    		
    		if(valor != 0){ //No se puede añadir el primer elemento de la lista que es: --Seleccione una Ciudad--    			    		
    			$('#ciudadesB_Dummy option').each(function(){
    				if($(this).val() == valor){
    					repetido = true;
    				}
    			});
    			
    			if(!repetido){
    				$('#ciudadesB_Dummy').append(new Option(texto, valor, true, false)); 
    				//El segundo false es para que se cree el option sin estar seleccionado por defecto
				 	//Por defecto el elemento agregado se añade seleccionado así que deseleccionamos todo el select.
   					//$('ciudadesB_Dummy option').prop("selected", false);
    			}    			    			    			
    		}    		    		               		
    	}
    	
		function eliminarCiudadDeseada(){    								
			$('#ciudadesB_Dummy option:selected').each(function(){
				if($(this).val() != 0){ //No se podrá eliminar --Agrege Ciudad/es--
					$(this).remove();
				}
			});			
    	}
			
		function beforeSubmit(){
			$('#ciudadesB_Dummy option').each(function(){
				if($(this).val() != 0){ //No se podrá eliminar --Agrege Ciudad/es--
					var salida = $(this).text() + "," + $(this).val();
					if(!$('#form\\:ciudadesB').val()){						
						$('#form\\:ciudadesB').val(salida);
					}else{
						var varOld = $('#form\\:ciudadesB').val();						
						$('#form\\:ciudadesB').val(varOld + "-" + salida);
					}					 
				}
			});
			
			showProgressBar('accion');
		}
		
		function errorOff(){			
			$('#form\\:errorOff').click();
		}
		
		$(document).ready(function () {		
			//Paramos el hilo que se creo para aumentar la barra de progreso			
			clearInterval(intervalBar);			
			$("#progressbar").hide("fade", 200);						
			
			// ciudadText,ciudadVal-								
			if($('#form\\:ciudadesB').val().length > 2){
				var ciudadesDeseadasCodif = $('#form\\:ciudadesB').val().split("-");
				for(var i=0; i < ciudadesDeseadasCodif.length; i++){
					var ciudadDeseadaCodif = ciudadesDeseadasCodif[i].split(",");
					$('#ciudadesB_Dummy').append(new Option(ciudadDeseadaCodif[0], ciudadDeseadaCodif[1], true, false));
				}	
			}
					
			//Gestion de Error
			var error = $('#form\\:error').val();
			var navegacion = $('#form\\:navegacion').val();			
			var bError = false;
			if(error != null && error.length > 3 && navegacion=="alta.xhtml"){				
				bError = true;
			}			
			$("#principal span").each(function() {				
				if($(this) != null && $(this).text().length > 3){
					bError = true;
				}								
			});
			if(bError){
				$('#divRegistro').effect("shake", "slow",errorOff());
			}
			
			//Ocultamos el boton cabecera.
			$('#botonTextoHead').hide('drop', 400);			
		});					
		
	//]]>
    </script>
	
	<div id="principal" class="principal">                                   
			            
		<div class="informacion">			
			<h3>Pantalla de registro. </h3>
			<p>Introduce tus datos a fin de que el sistema pueda ayudarte a encontrar a una parsona con una plaza intercambiable con la tuya.</p>
			<h:form>
				<h:commandLink value="Politica de privacidad" action="#{navegationBean.setViewedPage('login.xhtml')}">
					<f:ajax execute="@this" render=":contPrincipal" />						
				</h:commandLink>																	
			</h:form>					
		</div>
			            
		<div id="divRegistro" class="cajaRegistro">											
			
			<h:form id="form">
				<h3>Datos personales:</h3>
				<h:panelGrid columns="3">
					
					<h:outputLabel value= "Nombre: " for="nombre" /> 
					<h:inputText id="nombre" label="Nombre" required="true"
					value="#{clienteBean.nombre}" validator="letrasValidator"/>
					<h:message for="nombre" errorClass="error" />
												
					<h:outputLabel value= "Apellidos: " for="apellidos" /> 
					<h:inputText id="apellidos" label="Apellidos" required="true"
					value="#{clienteBean.apellidos}" validator="letrasValidator" />
					<h:message for="apellidos" errorClass="error" />

					<h:outputLabel value= "Email: " for="email" /> 
					<h:inputText id="email" label="Email" required="true"
					value="#{clienteBean.email}" validator="emailValidatorAlta" />
					<h:message for="email" errorClass="error" />					

					<h:outputLabel value= "Contraseña: " for="contrasena" /> 
					<h:inputSecret id="contrasena" label="Contrasena" required="true"
					value="#{clienteBean.contrasena}" validator="passwordValidator" />
					<h:message for="contrasena" errorClass="error" />

					<h:outputLabel value= "Teléfono: " for="telefono" /> 
					<h:inputText id="telefono" label="Telefono" required="true"
					value="#{clienteBean.telefono}" validator="telefonoValidator" />
					<h:message for="telefono" errorClass="error" />

				</h:panelGrid>
					
				<h3>Datos Laborales:</h3>									
				<h:panelGrid columns="3">	

					<h:outputLabel value= "Sector laboral: " for="sector" /> 
					<h:selectOneMenu id="sector" label="Sector" value="#{clienteBean.sector}" required="true" validator="selectOneMenuValidator">
						<f:selectItem itemValue="0" itemLabel="-- Seleccione un sector --" />
						<f:selectItem itemValue="1" itemLabel="Profesorado"/>
						<f:selectItem itemValue="2" itemLabel="Administrativo" />
					</h:selectOneMenu>
					<h:message for="sector" errorClass="error" />
		
					<h:outputLabel value= "Departamento: " for="departamento" /> 
					<h:selectOneMenu id="departamento" label="Departamento" value="#{clienteBean.departamento}" required="true" validator="selectOneMenuValidator">
						<f:selectItem itemValue="0" itemLabel="-- Seleccione un departamento --" />
						<f:selectItem itemValue="1" itemLabel="Bilogía"/>
						<f:selectItem itemValue="2" itemLabel="Matemáticas"/>
						<f:selectItem itemValue="3" itemLabel="Historia" />
					</h:selectOneMenu>
					<h:message for="departamento" errorClass="error" />
	
					<h:outputLabel value= "Ciudad de plaza actual: " for="ciudada" /> 
					<h:selectOneMenu id="ciudada" label="Ciudada" value="#{clienteBean.ciudada.id}" required="true">						
						<f:selectItems value="#{listaCiudadesBean.ciudades}" var="lista" itemLabel="#{lista.ciudad}" itemValue="#{lista.id}" />
					</h:selectOneMenu>
					<h:message for="ciudada" errorClass="error" />																				
					 											
				</h:panelGrid>
				
				<h3>Ciudades Interesadas:</h3>	
				<h:panelGrid columns="2">
					
					<h:outputLabel value= "Ciudades:" for="ciudada2" /> 
					<h:selectOneMenu id="ciudada2" label="Ciudada" style="width: 194px;">						
						<f:selectItems value="#{listaCiudadesBean.ciudades}" var="lista" itemLabel="#{lista.ciudad}" itemValue="#{lista.id}" />
					</h:selectOneMenu>	
					
					<select multiple="multiple" id="ciudadesB_Dummy" class="ciudadDeseada" style="width: 174px;">  
  						<option value="0">-- Agregue Ciudad/es --</option>
					</select>																					
					
					<h:panelGroup>						
						<a class="g-button" onclick="anyadirCiudadDeseada()">Añadir</a><br/>
						<a class="g-button" onclick="eliminarCiudadDeseada()">Eliminar</a><br/>
					</h:panelGroup>
					
				</h:panelGrid>
					
				<p>
					<h:commandButton  value="Finalizar" styleClass="g-button g-button-submit" action="#{altaController.validarAlta}" onclick="beforeSubmit()">
						<f:ajax execute="@form" render=":contPrincipal" />													
					</h:commandButton>
					<input type="button" class="g-button g-button-submit" onclick="actionTab(1)" value="Cancelar" />								
				</p>
					
				<h:inputHidden id="ciudadesB" value="#{altaBean.listaCiudadesDeseadas}" />
							
				<h:inputHidden id="error" value="#{navegationBean.error}" />
				<h:inputHidden id="navegacion" value="#{navegationBean.viewedPage}" />		
				<h:commandButton id="errorOff" action="#{navegationBean.setError('')}" style="display:none">
					<f:ajax execute="@this" render="errorOff" />
				</h:commandButton>										
			</h:form>
				
		</div>

	</div>
	
</ui:composition>